<template>
  <a-modal
    v-model="visible"
    title="校准打卡记录"
    width="645px"
    :destroy-on-close="true"
    @ok="fixOk"
    @cancel="$emit('update:visible', false)"
  >
    <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="打卡状态">
        <a-input v-model="form.status" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="校准方式">
        <a-input v-model="form.type" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="补卡时间" help="校准后，原打卡记录变成失效记录" :required="true">
        <a-date-picker v-model="form.time" :disabled="true" format="YYYY-MM-DD" style="margin-right:12px;" />
        <a-time-picker v-model="form.time" format="HH:mm" />
      </a-form-model-item>
      <a-form-model-item label="校准人">
        <a-input v-model="form.name" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-input v-model="form.note" type="textarea" placeholder="请输入" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { fixStatus } from "@/api/check/checkCard";
import moment from "moment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    jsonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        status: "未打卡",
        type: "补卡",
        time: "",
        name: "",
        note: ""
      }
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.form.time = this.jsonData.time;
        this.form.note = this.jsonData.note;
        this.form.name = this.$store.state.auth.name;
      }
    }
  },
  methods: {
    fixOk() {
      const data = {
        punchRecordId: this.jsonData.punchRecordId,
        number: this.jsonData.number,
        remark: this.form.note,
        calibrationMethod: "补卡",
        punchTime: moment(this.form.time).format("YYYY-MM-DD HH:mm:ss")
      };
      if (this.form.time) {
        fixStatus(data).then(res => {
          this.$emit("onUpdate");
          this.$emit("update:visible", false);
        });
      } else {
        this.$message.error("请选择时间!");
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
